<!-- 
  被 Transition 包裹的元素或组件，在进入或离开时，会主动添加上如下的一些类名

    .v-enter-from
    .v-enter-to
    .v-enter-active

    .v-leave-from
    .v-leave-to
    .v-leave-active

  Transition 的 name 属性
    可以控制类名，默认为 v 开头，当设置 name 之后，就会以 name 的值开头

  Transition 的 appear 属性
    会让进入动画，默认触发一次

  Transition 的 6个属性
    enter-from-class
    enter-to-class
    enter-active-class

    leave-from-class
    leave-to-class
    leave-active-class

  enter-active-class 与 leave-active-class 配置 动画库（animate.css）来显示动画效果
 -->

<template>
  <div>
    <h1>纯CSS动画效果</h1>

    <van-button @click="fn1">Toggle</van-button>

    <Transition
      name="abcd"
      enter-active-class="animate__animated animate__shakeX"
      leave-active-class="animate__animated animate__shakeY"
    >
      <div class="box" v-if="isShow"></div>
    </Transition>

    <hr />

    <Transition appear enter-from-class="abcd">
      <div class="box" v-if="isShow"></div>
    </Transition>

    <hr />

    <Transition name="h" appear>
      <div class="box" v-if="isShow"></div>
    </Transition>

    <hr />

    <Transition name="bounce" appear>
      <div class="box" v-if="isShow"></div>
    </Transition>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const isShow = ref(true)
function fn1() {
  isShow.value = !isShow.value
}
</script>

<style lang="scss" scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: green;
}

.abcd {
  height: 0;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-enter-active,
.v-leave-active {
  transition: all 5s ease;
}

.h-leave-to,
.h-enter-from {
  height: 0px;
}

.h-leave-active,
.h-enter-active {
  transition: height 0.3s ease;
}

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
</style>
